import React, { Component } from "react";
import { Link, NavLink } from "react-router-dom";
// import './theme.css'
import Mutil from "util/mim.jsx";
import User from "server/user-server.jsx";

const mm = new Mutil();
const user = new User();

export default class TopNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: mm.getStorage('userInfo').username || ""
    };
  }
  onLogout() {
    user.logout().then(res => {
      mm.removeStorage('userInfo')
      this.props.data.history.push('/login')
    },errMsg => {
      mm.errorTips(errMsg)
    })
  }
  render() {
    return (
      <div className="navbar navbar-default top-navbar">
        <div className="navbar-header">
          <Link className="navbar-brand" to="/">
            <b>HAPPY</b>
            商城
          </Link>
        </div>

        <ul className="nav navbar-top-links navbar-right">
          <li className="dropdown">
            <a className="dropdown-toggle" href="javascript:;">
              <i className="fa fa-user fa-fw" />
              {this.state.username ? (
              <span>
                欢迎，
                {this.state.username}
              </span>
               ) : (
                <span>欢迎您</span>
              )}
              <i className="fa fa-caret-down" />
            </a>
            <ul className="dropdown-menu dropdown-user">
              <li>
                <a
                  onClick={() => {
                    this.onLogout();
                  }}
                >
                  <i className="fa fa-sign-out fa-fw" />
                  <span>退出登录</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    );
  }
}
